<template>
  <div class="city-wrapper">
    <template v-for="(item, index) in cityItemList">
      <span
        :class="selectedCity.indexOf(item.city) !== -1 ? 'active' : ''"
        @click="handleCityClick(item, index)"
        :key="item.id"
      >
        {{ item.city }}
      </span>
    </template>
  </div>
</template>

<script>
export default {
  props: ['cityItemList', 'selectedCity'],
  methods: {
    handleCityClick(item) {
      this.$emit('cityItem', item)
    },
  },
}
</script>

<style lang="scss" scoped>
.city-wrapper {
  display: flex;
  flex-wrap: wrap;
  span {
    margin: 5px;
    padding: 5px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
  .active {
    background: gold;
  }
}
</style>
